<script setup lang="ts">
import AsideMenuLayer from './AsideMenuLayer.vue'
import OverlayLayer from './OverlayLayer.vue'
import type { MenuItem } from '@/layouts/menuAside'

defineProps<{
  menu: MenuItem[]
  isAsideMobileExpanded?: boolean
  isAsideLgActive?: boolean
}>()

const emit = defineEmits<{
  (e: 'menuClick', event: MouseEvent, item: MenuItem): void
  (e: 'asideLgCloseClick', event: MouseEvent): void
}>()

const menuClick = (event: MouseEvent, item: MenuItem) => {
  emit('menuClick', event, item)
}

const asideLgCloseClick = (event: MouseEvent) => {
  emit('asideLgCloseClick', event)
}
</script>

<template>
  <AsideMenuLayer
    :menu="menu" :class="[
      isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0',
      { 'lg:hidden xl:flex': !isAsideLgActive },
    ]" @menu-click="menuClick" @aside-lg-close-click="asideLgCloseClick"
  />
  <OverlayLayer v-show="isAsideLgActive" z-index="z-30" @overlay-click="asideLgCloseClick" />
</template>
